<template>
		<view class="content">
			<Header></Header>
			<view class="home-tabs">
				<u-tabs  
				:list="topBar" 
				@change="changeTabs" 
				:inactiveStyle="{
					color:'#AAAAAA',
					transform:'scale(1)'
				}"  
				:activeStyle="{
					color:'#303133',
					fontWeight:'bold',
					transform:'scale(1.05)',
					fontsize:'29rpx'
				}"
				:current="current"></u-tabs>
			</view>
			<view class="home-swiper">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :current="current" @change="changeSwiper">
					<swiper-item v-for="(item,index) in topBar" :key="index">
						<component :is="activeCom"></component>
					</swiper-item>
					
				</swiper>
			</view>
		</view>
</template>

<script>
import Header from '@/components/common/Header.vue'
import Recommend from '../../components/home/recommend.vue'
import Free from '../../components/home/free.vue'
import ActualCombat from '../../components/home/actualCombat.vue'

export default{
	components:{
		Header,
		Recommend,
		Free,
		ActualCombat
	},
		data() {
					return {
						current:0,
						topBar: [{
							name: '今日推荐'
						}, {
							name: '免费课程'
						}, {
							name: '实战课程',
						
						}],
						activeCom:Recommend
					}
				},
				methods:{
					//切换tabs
					changeTabs(item){
						this.current=item.index
						this.tabsCom(item.index)
					},
					//切换swiper
					changeSwiper(e){
						this.current=e.detail.current
						this.tabsCom(e.detail.current)
					},
					//判断动态组件显示
					tabsCom(index){
						switch(index){
							case 0:
							this.activeCom=Recommend
							break;
							case 1:
							this.activeCom=Free
							break;
							case 2:
							this.activeCom=ActualCombat
							break;
						}
					}
				}
}
</script>
<style>
	/deep/.u-tabs_wrapper_nav_item_text{
		font-size: 29rpx;
		fony-weight:400;
		opacity: 1;
	}
	.home-swiper{
		padding: 29rpx;
	}
</style>


